<template>
  <div>
    <basic-dialog
      :visible.sync="mutexVisible"
      :handleClose="handleCloseDialog"
      :title="'品类互斥信息'"
      :show-footer="false"
      :width="'60%'"
      :handleOpened="handleQueryData"
    >
      <el-tabs
        v-model="tabsStatus"
        @tab-click="handleClickTabs"
      >
        <el-tab-pane
          v-for="item in tabList"
          :disabled="tableInfo.loading"
          v-model="item.name"
          :key="item.name"
          :label="item.title"
          :name="item.name"
        />
        <BasicTable
          ref="basicTable"
          :loading="tableInfo.loading"
          :columns="tableInfo.columns"
          :dataSource="tableInfo.list"
          :pagination="pagination"
          :pageSizes="pageSizes"
          :tableHeight="443"
          :showSelectCol="false"
          @pageChange="handlePageChange"
          @pageSizeChange="handlePageSizeChange"
        />
      </el-tabs>
    </basic-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import BasicDialog from '@/components/BasicDialog';
import BasicTable from '@/components/BasicTable';
import { getBtnsId } from '@/libs/btnsPermission';
import { isResponseSuccess } from '@/utils/bizUtils';
import { ApiRequest } from '@api/basePage';

export default {
  name: 'MutexInfoDialog', // 品类互斥信息
  components: {
    BasicDialog,
    BasicTable,
  },
  props: {
    mutexVisible: {
      type: Boolean,
      default: false
    },
    categoryUuid: [Number, String],
    mutexData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      apiPrefix: '/sysback/category/productplatformcategory/',
      tabList: [],
      uuid: '',
      tabsStatus: '', // 当前tabs页签
      pageSizes: [10, 20, 30, 40],
      pagination: {
        nowPage: 1,
        totalNum: 0,
        pageShow: 10
      },
      tableInfo: {
        list: [],
        loading: false,
        columns: [],
      },
      defaultColumns: [
        {
          title: 'SPU编码',
          key: 'spuNo',
        },
        {
          title: 'SKU编码',
          key: 'skuNo',
        },
        {
          title: '商品名称',
          key: 'productName',
        },
        {
          title: '单据号',
          key: 'recordNo',
        },
      ],
      supApiCols: [
        {
          title: '供应商编号',
          key: 'supplierCode',
        },
        {
          title: '供应商名称',
          key: 'supplierName',
        },
        {
          title: '供应商状态',
          key: 'supplierStatusName',
        },
        {
          title: '主营品类名',
          key: 'supMainCategoryName',
        },
        {
          title: '供应商管理区域',
          key: 'supManagerHrAreaName',
        },
      ],
      potentialSkuCols: [
        {
          title: 'SKU编码',
          key: 'skuNo',
        },
        {
          title: '商品名称',
          key: 'productName',
        },
        {
          title: '规格',
          key: 'specModel',
        },
      ]
    };
  },
  // 页面加载
  mounted () {
    this.setTableColumns()
  },
  computed: {
    ...mapGetters('permissions/systemBtns', ['showBtn']),
  },
  watch: {
    mutexData: {
      handler (val) {
        const {
          mutexSpuUnderCateTotalNum, // 品类下的商品
          mutexPrepareTotalNum, // 商品准入
          mutexAddSkuTotalNum, // sku准入
          mutexEditSpuCateTotalNum, // 修改商品品类
          mutexEnableSkuTotalNum, // 启用中的商品
          supplyTotalNum, // 启用的供应商
          potentialSkuTotalNum, // 潜在商品
        } = val;
        this.tabList = [];
        if (mutexSpuUnderCateTotalNum) {
          this.tabList.push({ title: `品类下的商品(${mutexSpuUnderCateTotalNum})`, name: '10', url: 'getCateDisableMutexSpuUnderCate' })
        }
        if (mutexPrepareTotalNum) {
          this.tabList.push({ title: `商品准入(${mutexPrepareTotalNum})`, name: '20', url: 'getCateDisableMutexPrepare' })
        }
        if (mutexAddSkuTotalNum) {
          this.tabList.push({ title: `SKU准入(${mutexAddSkuTotalNum})`, name: '30', url: 'getCateDisableMutexAddSku' })
        }
        if (mutexEditSpuCateTotalNum) {
          this.tabList.push({ title: `修改品类(${mutexEditSpuCateTotalNum})`, name: '40', url: 'getCateDisableMutexEditSpuCate' })
        }
        if (mutexEnableSkuTotalNum) {
          this.tabList.push({ title: `启用中的商品(${mutexEnableSkuTotalNum})`, name: '50', url: 'getCateDisableMutexEnableSku' })
        }
        if (supplyTotalNum) {
          this.tabList.push({ title: `启用中的供应商(${supplyTotalNum})`, name: '60', url: 'getCateDisableSupply' })
        }
        if (potentialSkuTotalNum) {
          this.tabList.push({ title: `潜在商品(${potentialSkuTotalNum})`, name: '70', url: 'getCateDisableMutexPotentialSku' })
        }
        if (this.tabList.length) {
          this.tabsStatus = this.tabList[0].name;
        }
        this.setTableColumns()
      },
      immediate: true,
      deep: true
    },
    categoryUuid (val) {
      this.uuid = val;
    }
  },
  methods: {
    setTableColumns () {
      if (this.tabsStatus === '60') {
        this.tableInfo.columns = this.supApiCols;
      } else if (this.tabsStatus == '70') {
        this.tableInfo.columns = this.potentialSkuCols;
      } else {
        this.tableInfo.columns = this.defaultColumns;
      }
    },
    handleClickTabs () {
      this.handleQueryData(1);
      this.setTableColumns()
    },
    // 获取 表格数据
    handleQueryData (nowPage) {
      if (nowPage) {
        this.pagination.nowPage = nowPage;
      }
      this.tableInfo.loading = true;
      sessionStorage.setItem('buttonId', getBtnsId('查询'));
      ApiRequest(this.apiPrefix + this.filterTabUrl(this.tabsStatus), 'post', { categoryUuid: this.uuid, ...this.pagination }).then(res => {
        this.tableInfo.loading = false;
        if (isResponseSuccess(res)) {
          const { retData } = res;
          this.tableInfo.list = retData.results;
          this.pagination.totalNum = retData.totalNum;
          this.reloadTableLayout()
        }
      }).catch(() => {
        this.tableInfo.loading = false;
      });
    },
    // 分页状态变更
    handlePageChange (nowPage) {
      this.pagination.nowPage = nowPage;
      this.handleQueryData();
    },
    // 分页状态变更
    handlePageSizeChange (pageShow) {
      this.pagination.pageShow = pageShow;
      this.handleQueryData(1);
    },
    // 关闭弹框
    handleCloseDialog () {
      this.$emit('update:mutexVisible', false);
    },
    // 表格DOM重新渲染
    reloadTableLayout () {
      this.$nextTick(() => {
        this.$refs.basicTable.$refs.elTable.doLayout();
      });
    },
    // 过滤当前tab对应接口
    filterTabUrl (name) {
      return this.tabList.find(item => item.name == name).url
    }
  }
};
</script>
<style scoped>
.form-container {
  margin-bottom: 10px;
}
</style>
